<template>
  <el-dialog
      destroy-on-close
      v-model="show"
      title="预览"
      width="1000"
      align-center
  >
    <div class="content">
      <div class="content-chart"
           :style="{
        width:imageInfo.originalWidth+'px',
        height:imageInfo.originalHeight+'px',
      }" ref="chartElement"></div>
      <img :src="imageInfo?.url" alt="">
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show = false">Cancel</el-button>
        <el-button type="primary" @click="show = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {nextTick, ref} from 'vue'
import * as echarts from 'echarts';

const show = ref(false)
const markData = ref([]);
const imageInfo = ref({});
const chartElement = ref(null);
const openModal = (data) => {
  markData.value = data.svgData;
  imageInfo.value = data.image;
  show.value = true;
  nextTick(() => {
    beginChart();
  })
}

const mapDataToChartShapes = (myChart) => {
  const shapeMapToChartType = {
    'rectangle': 'polygon',
    'polygon': 'polygon',
    'circle': 'circle',
    'polyline': 'polyline',
    'label': 'circle'
  }
  return markData.value.map((shape, index) => {
    let item = {
      type: shapeMapToChartType[shape.type],
      shape: {}
    }
    if (shape.type === "rectangle") {
      let data = shape.svgPoints.map((v) => {
        return [v.x, v.y]
      })
      const start = data[0]
      const end = data[1]
      item.shape['points'] = [
        myChart.convertToPixel('grid', start),
        [myChart.convertToPixel('grid', [end[0], start[1]])[0], myChart.convertToPixel('grid', [end[0], start[1]])[1]],
        myChart.convertToPixel('grid', end),
        [myChart.convertToPixel('grid', [start[0], end[1]])[0], myChart.convertToPixel('grid', [start[0], end[1]])[1]],
        myChart.convertToPixel('grid', start)
      ]
      item['style'] = {
        fill: shape.style.color,
        opacity: shape.style.opacity,
        stroke: shape.style.outlineColor,
        lineWidth: 2,
      }
    } else if (shape.type === 'polygon') {
      item.shape['points'] = shape.svgPoints.map((xy) => [xy.x, xy.y]);
      item['style'] = {
        fill: shape.style.color,
        opacity: shape.style.opacity,
        stroke: shape.style.outlineColor,
        lineWidth: 2,
      }
    } else if (shape.type === 'circle') {
      item.shape = {
        cx: shape.svgPoints.x,
        cy: shape.svgPoints.y,
        r: shape.style.radius
      }
      item['style'] = {
        fill: shape.style.color,
        opacity: shape.style.opacity,
        stroke: shape.style.outlineColor,
        lineWidth: 2,
      }
    } else if (shape.type === 'polyline') {
      item.shape['points'] = shape.svgPoints.map((xy) => [xy.x, xy.y]);
      item['style'] = {
        lineWidth: 6,
        stroke: shape.style.color,
      }
    } else if (shape.type === 'label') {
      item['shape'] = {
        cx: shape.svgPoints.x,
        cy: shape.svgPoints.y,
        r: 4
      }
      item['textContent'] = {
        type: 'text',
        style: {
          text: shape.style.text,
        },
      }
      item['textConfig'] = {
        position: 'right'
      }
    }
    return item;
  })
}

const beginChart = () => {
  let myChart = null;
  if (echarts.getInstanceByDom(chartElement.value)) {
    myChart = echarts.getInstanceByDom(chartElement.value);
  } else {
    myChart = echarts.init(chartElement.value)
  }
  let option = {
    grid: {top: 0, bottom: 0, left: 0, right: 0},
    xAxis: {min: 0, max: imageInfo.value.originalWidth, type: 'value'},
    yAxis: {min: 0, max: imageInfo.value.originalHeight, type: 'value', inverse: true},
    graphic: []
  }
  myChart.setOption(option);

  setTimeout(() => {
    const graphics = mapDataToChartShapes(myChart);
    myChart.setOption({
      graphic: graphics
    });
  }, 0)
}

defineExpose({
  openModal
})
</script>

<style scoped>
.content {
  width: 1000px;
  height: 50vh;
  overflow: auto;
  position: relative;
}

.content > img {
  display: block;
  font-size: 0;
}

.content-chart {
  position: absolute;
  top: 0;
  left: 0;
}
</style>